<template>
  <div class="main-content-container">
    <div ref="search" style="padding-bottom: 10px">
      <el-row type="flex" justify="space-between">
        <el-col :span="2" :offset="22" class="spn buttons" style="text-align:right;display:block">
          <el-button @click="$refs.addBedRef.handleClose(1,{'status':'启用'})">+ 新增床位</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="box-show" :style="'height:'+ (innerHeight + 92) + 'px'">
      <el-table :loading="loading" :data="pageDatas" style="width: 100%" border :row-class-name="tableColor" :height="innerHeight">
        <el-table-column prop="no" label="编号" :show-overflow-tooltip="true" />
        <el-table-column prop="name" label="床位名称" :show-overflow-tooltip="true" />
        <el-table-column prop="whetherFree" label="是否空闲" :show-overflow-tooltip="true" />
        <el-table-column prop="releaseTime" label="释放时间" :show-overflow-tooltip="true" />
        <el-table-column prop="status" label="状态" :show-overflow-tooltip="true" />
        <el-table-column fixed="right" label="操作">
          <template slot-scope="{ row }">
            <el-button :disabled="row.whetherFree==='占用'?true:false" type="text" size="small" @click="$refs.addBedRef.handleClose(2,row)">修改</el-button>
            <el-button :disabled="row.whetherFree==='占用'?true:false" type="text" size="small" @click="deleteBtn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-num="params.page" :page-size="params.pageSize" :on-change="handlePaginationChange" :total="total" />
    </div>
    <AddBed ref="addBedRef" @success="getPageDatas()" />
  </div>
</template>
<script>
import AddBed from "./addBed";
import { tableColor, labelHeigh } from '@/utils/common.js';
export default {
  components: { AddBed },
  data() {
    return {
      tableColor,
      innerHeight: null,
      searchForm: {},
      options: [],
      pageDatas: [],
      params: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
      addData: {}, // 添加数据
      selectData: [],
      flag: true,
      show: true,
      widths: 50,
      loading: false,
    };
  },
  created() {
    this.getPageDatas();
  },
  mounted() {
    this.$nextTick(function() {
      this.innerHeight = labelHeigh(this.$refs.search);
    });
  },
  methods: {
    async getPageDatas() {
      this.loading = true;
      const res = await this.$api['department/bed/page']({ ...this.params, ...this.searchForm });
      this.loading = false;
      if (res.code !== 200) return this.$message.error('查询床位管理列表失败！');
      this.pageDatas = res.data.result;
      this.total = res.data.total;
      // this.$message.success('查询床位管理列表成功！');
    },
    handlePaginationChange(val) {
      this.params = { page: val.pageNum, pageSize: val.pageSize };
      this.getPageDatas();
    },
    // 删除
    async deleteBtn(id) {
      const confirmResult = await this.$confirm('请确认是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err);
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除');
      } else {
        this.loading = true;
        this.$api[`department/bed/delete`]({ id }).then(res => {
          if (res.code !== 200) return this.$message.error('删除床位失败！');
          this.$message.success('删除床位成功！');
          this.getPageDatas();
        }).finally(() => (this.loading = false));
      }
    },
  },
};
</script>
